<template>
	<div id="app">
		<div class="layout" v-show="show">
			<Layout>
				<Header>
					<p style="position: absolute;z-index: 99999;color: #FFFFFF;margin: 0 auto;margin-left: 300px;">{{datetime}}</p>
					<Menu mode="horizontal" theme="dark" active-name="1" style="-webkit-app-region: drag;">
						<img src="./assets/logo4.png" width="170px" height="70px" style="">
						<div style="float: right;-webkit-app-region: no-drag;">
							<MenuItem name="1" to="/">
							<Icon type="ios-navigate"></Icon>酷猫首页
							</MenuItem>
							<MenuItem name="2" to="/Netdisc">
							<Icon type="ios-keypad"></Icon>网络云盘
							</MenuItem>
							<MenuItem name="3" to="/Protocol">
							<Icon type="ios-analytics"></Icon>后端协议
							</MenuItem>
							<MenuItem name="4" to="DownloadManagement">
							<Icon type="ios-paper"></Icon>传输列表
							</MenuItem>
							<!-- <MenuItem name="5" to="Ceshi">
							<Icon type="ios-paper"></Icon>测试页面
							</MenuItem> -->
							<Divider type="vertical" size="default" />
							<!-- 无边框 -->
							<!-- <div style="float: right;">
								<a @click="minimizeWin">
									<Icon type="md-remove" size="20"></Icon>
								</a>
								<a @click="maximizeWin">
									<Icon type="md-expand" size="20"></Icon>
								</a>
								<a @click="closeWin">
									<Icon type="md-close" size="20"></Icon>
								</a>
							</div> -->

						</div>
					</Menu>
				</Header>
				<Content style="overflow:auto;background: #FFFFFF;">
					<router-view></router-view>
				</Content>
			</Layout>
		</div>
	</div>
</template>
<script>
	import { remote } from 'electron';
	export default {
		data() {
			return {
				theme1: "light",
				show: true,
				value1: 0,
				datetime: ''
			};
		},
		mounted() {
			setInterval(() => {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				this.datetime = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second
			}, 1000)
			console.log(document.sessionStorage)
		},
		methods: {
			// minimizeWin() {
			// 	remote.getCurrentWindow().minimize(); // 窗口最小化
			// },
			// maximizeWin() {
			// 	const win = remote.getCurrentWindow();
			// 	if (win.isMaximized()) { // 判断 窗口是否已最大化 
			// 		win.restore(); // 恢复原窗口大小
			// 	} else {
			// 		win.maximize(); //最大化窗口
			// 	}
			// },
			// closeWin() {
			// 	remote.getCurrentWindow().close(); // 关闭窗口，也结束了所有进程
			// },
			a() {
				this.value1 = 0
			},
			b() {
				this.value1 = 1
			},
			c() {
				this.value1 = 2
			},
			d() {
				this.value1 = 3
			}
		}
	};
</script>


<style>
	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}

	.layout-nav {
		width: 420px;
		margin: 0 auto;
		margin-right: 20px;
	}

	.layout-footer-center {
		text-align: center;
	}

	/* 滚动条美化 */
	::-webkit-scrollbar {
		width: 5px;
		height: 6px;
		background: #ccc;
	}

	::-webkit-scrollbar-button {
		background-color: #e5e5e5;
	}

	::-webkit-scrollbar-track {
		background: #999;
	}

	::-webkit-scrollbar-track-piece {
		background: #ccc
	}

	::-webkit-scrollbar-thumb {
		background: #666;
	}

	::-webkit-scrollbar-corner {
		background: #82AFFF;
	}

	::-webkit-scrollbar-resizer {
		background: #FF0BEE;
	}

	scrollbar {
		-moz-appearance: none !important;
		background: rgb(0, 255, 0) !important;
	}

	scrollbarbutton {
		-moz-appearance: none !important;
		background-color: rgb(0, 0, 255) !important;
	}

	scrollbarbutton:hover {
		-moz-appearance: none !important;
		background-color: rgb(255, 0, 0) !important;
	}


	.leftMenu {
		width: 200px;
		height: 100%;
		float: left;
		position: fixed;
		z-index: 999;
		background-color: rgba(15, 10, 6, 0.8);
		text-align: center;
		line-height: 80px;
	}

	.leftMenu-btn {
		margin: 60px 30px 30px 20px;
		background-color: #080503;
		color: #FFF;
		font-size: 16px;
	}

	Card {
		margin: 10px !important;
	}

	.yuanyuan {
		display: flex;
		background-color: red;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 120px;
	}

	.yuanyuan a {
		display: block;
		margin: 0 5px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #fff;
	}

	#btn {
		width: 80px;
		height: 80px;
		margin: 20px 40px 40px 0;
		font-size: 40px;
		color: #FFFFFF;
		border-width: 3px;
		background-color: transparent;
	}

	#btn:hover {
		width: 80px;
		height: 80px;
		margin: 20px 40px 40px 0;
		font-size: 40px;
		color: #1e1e1e;
		border-color: #faf5b2;
		background-color: #faf5b2;
	}
</style>
